<template>
  <div class="container container_login">
    <div class="login-wrap">
      <div class="login-left">
        <div class="login-ad">
          <img src="../../static/img/login_left.png" />
        </div>
      </div>
      <div class="login-right">
        <div class="login-box">
          <div class="login-title">登录</div>
          <div class="login-con">
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="phone" placeholder="请输入账号/手机号">
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-person.png" />
                </el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-ipt">
                <el-input class="login-ipt" v-model="password" placeholder="请输入密码" show-password>
                  <img slot="prefix" class="login-ipt-img" src="../../static/img/login-pass.png" />
                </el-input>
              </div>
            </div>
            <div class="con-item">
              <div class="item-check">
                <el-checkbox v-model="checked" class="myRedCheckBox">记住密码</el-checkbox>
              </div>
              <div class="forget-pwd-btn" @click="forgetPwd()">忘记密码</div>
            </div>
            <div class="con-item">
              <el-button class="login-btn" type="primary" :disabled="disabled" @click="confirm">登录</el-button>
            </div>

            <div class="login-method-tit">其他登录方式</div>

            <div class="login-other">
              <div class="login-method" @click="goQQ()">
                <img src="../../static/img/login-qq.png" alt />
              </div>
              <div class="login-method" @click="goVX()">
                <img src="../../static/img/login-wx.png" alt />
              </div>
            </div>

            <!-- <div class="bkb" @click="goBkb()">打开离线备课包</div> -->
          </div>
        </div>
      </div>
    </div>
    <Copyright />
  </div>
</template>

<script>
import Copyright from '../components/copyright.vue'
import { mapGetters, mapMutations } from 'vuex'
import Header from '../components/header'
import { mapActions } from 'vuex'
export default {
  components: { Header, Copyright },
  data() {
    return {
      phone: '',
      password: '',
      checked: false,
      disabled: false,
      code: '',
      token: localStorage.getItem('token'),
      state: '',
      isVX: false,
    }
  },
  created() {
    this.getCookie()
    console.log('aaa')
    console.log(this.password)
    if (this.password != '') {
      this.checked = true
    }
    this.code = this.$route.query.code
    this.state = this.$route.query.state
    this.type = this.$route.query.type
    console.log(this.type)
    //this.govx();
    /// this.getCode();
  },
  methods: {
    getCode() {
      if (this.code != '') {
        if (this.type == 'qq') {
          console.log('isqq')
          //qq
          this.$api('user.pc_qq_login', {
            code: this.code,
            state: this.state,
          }).then((res) => {
            console.log(res)
            // this.$api('user.getuser', { token: this.token }).then(resUser => {
            //   localStorage.setItem('userInfo', JSON.stringify(resUser.data));
            //   this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            //   // window.location.reload();
            // });
          })
        } else {
          console.log('isvx')
          //微信
          this.$api('user.pc_third_login', {
            code: this.code,
            state: this.state,
          }).then((res) => {
            console.log(res)
            // this.$api('user.getuser', { token: this.token }).then(resUser => {
            //   localStorage.setItem('userInfo', JSON.stringify(resUser.data));
            //   this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            //   //  window.location.reload();
            // });
          })
        }
      }
    },
    goVX() {
      this.$api('user.pc_third_login_url', { type: 2 }).then((res) => {
        window.open(res.data)
      })
    },
    goQQ() {
      //https://d-zhzh.bigchun.com/#/setting?code=0812v60w3CzxjX29xb3w3fc3En22v60x&state=4b8eeb2a-3f54-4021-b594-4de1e06bc75f
      this.$api('user.pc_qq_login_url', { type: 2 }).then((res) => {
        window.open(res.data)
      })
    },
    confirm() {
      if (!this.phone.trim()) {
        this.$message('请输入账号')
        return
      }
      if (!this.password.trim()) {
        this.$message('请输入密码')
        return
      }
      let formData = {
        account: this.phone,
        password: this.password,
        login_type: 'web',
      }
      const self = this
      if (self.checked == true) {
        // console.log("checked == true");
        //传入账号名，密码，和保存天数3个参数
        self.setCookie(self.phone, self.password, 7)
      } else {
        // console.log("清空Cookie");
        //清空Cookie
        self.clearCookie()
      }

      this.disabled = true
      this.$api('login.index', formData).then((res) => {
        this.disabled = false
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: 'success',
          })
          if (!localStorage.getItem('schoolInfo')) {
            this.$api('index.getLogo', {}).then((res) => {
              this.schoolInfo = res.data
              localStorage.setItem('schoolInfo', JSON.stringify(res.data))
            })
          }
          localStorage.setItem('token', res.data.userinfo.token)
          this.$api('user.getuser', { token: res.data.userinfo.token }).then(
            (resUser) => {
              localStorage.setItem('userInfo', JSON.stringify(resUser.data))
              this.$api('index.userauth', {
                token: res.data.userinfo.token,
              }).then((resUserAuth) => {
                localStorage.setItem('jump_path', resUserAuth.data.jump_path)
                localStorage.setItem(
                  'userAuth',
                  JSON.stringify(resUserAuth.data)
                )
                this.$router.push(resUserAuth.data.jump_path)
              })
            }
          )
        } else if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
        } else if (res.code == 2) {
          this.$message({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date() //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        'userName' + '=' + c_name + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie =
        'userPwd' + '=' + c_pwd + ';path=/;expires=' + exdate.toGMTString()
    },
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') //再次切割
          //判断查找相对应的值
          if (arr2[0] == 'userName') {
            this.phone = arr2[1] //保存到保存数据的地方
          } else if (arr2[0] == 'userPwd') {
            this.password = arr2[1]
          }
        }
      }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1) //修改2值都为空，天数为负1天就好了
    },

    forgetPwd() {
      this.$router.push('/forgetPwd')
    },
    goBkb() {
      this.$router.push('/bkblist')
    },
    otherLogin() {
      this.$router.push('/otherLogin')
    },
  },
}
</script>

<style lang="scss" scoped></style>
